import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import './index.css';
import { registerMicroApps, start, initGlobalState } from 'qiankun';
import { getToken, setToken } from '@/utils/auth';
import '@/language';

setToken(
  'eyJhbGciOiJIUzUxMiJ9.eyJsb2dpbl91c2VyX2tleSI6ImNhZDVkMmRhMDJmNzQ5NTE5ODZmM2FhMzlhMjBiN2Q1In0.gkTR-AXc6jAOlOZgasiEZommUkzsFk7zW9oJiS3QNTDtfU5PBxrqWw5DASZk9Zx0pEurrDJpoFa7tn0JfnyIUg'
);

const app = [
  {
    // 子应用名字
    name: 'microjz-react',
    // 子应用容器id 需要在父应用中创建相关元素
    container: '#microjz-react',
    // 子应用进入地址
    entry: 'http://localhost:8080',
    // 激活子应用的路由
    activeRule: '/#/app/micro/home',
  },
  {
    name: 'micro-loong3-vue',
    container: '#micro-loong3-vue',
    entry: '//localhost:3001',
    activeRule: '/#/app/loong3',
    props: { token: getToken },
  },
];

//配置两个子应用
registerMicroApps(app, {
  beforeLoad: [async (app) => console.log('beforeLoad', app.name)],
  beforeMount: [async (app) => console.log('beforeMount', app.name)],
  afterMount: [async (app) => console.log('afterMount', app.name)],
});

// 状态共享
const state = {};
const actions = initGlobalState(state);
actions.onGlobalStateChange((state, prev) => {
  console.log('状态变更前后', state, prev);
});

// setTimeout(() => {
//   actions.setGlobalState(state);
// }, 3000);

export default actions.setGlobalState;

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);
root.render(<App />);

// {
//   sandbox: {
//     // 样式隔离特性
//     experimentalStyleIsolation: true,
//     // strictStyleIsolation:true
//   }
// }
start();
